<template>
  <div class="create-container">
    <div class="right-container">
      <!---->
      <el-form :inline="true" ref="listQuery" :rules="listQueryRules" :model="listQuery" status-icon label-position="right" class="demo-form-inline"
               label-width="120px" style="display: flex;">
        <div>
          <el-form-item label="用户名称：" prop="userName">
            <el-input v-model="listQuery.userName" placeholder="用户登录名称"/>
          </el-form-item>
          <el-form-item label="开始时间：" prop="startTime">
            <el-date-picker
              v-model="listQuery.startTime"
              type="datetime"
              placeholder="开始时间"
              value-format="yyyy-MM-dd HH:MM:SS">
            </el-date-picker>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="操作动作：" prop="operate">
            <el-input v-model="listQuery.operate" placeholder="操作动作"/>
          </el-form-item>
          <el-form-item label="结束时间：">
            <el-date-picker
              v-model="listQuery.endTime"
              type="datetime"
              placeholder="结束时间"
              value-format="yyyy-MM-dd HH:MM:SS">
            </el-date-picker>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="操作对象类型：" prop="objectType">
            <el-input v-model="listQuery.objectType" placeholder="操作对象类型"/>
          </el-form-item>
          <el-form-item label="操作对象名称：" prop="objectName">
            <el-input v-model="listQuery.objectName" placeholder="操作对象名称"/>
          </el-form-item>
          <el-form-item>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="queryList">查询</el-button>
          </el-form-item>
        </div>
      </el-form>

      <el-form ref="editForm" :rules="listQueryRules" :model="editForm">
        <el-form-item label="结束时间：" prop="endTime">
          <el-date-picker
            v-model="editForm.endTime"
            type="datetime"
            placeholder="删除所选日期三个月前"
            value-format="yyyy-MM-dd HH:MM:SS">
          </el-date-picker>
          <el-button class="filter-item" type="danger" icon="el-icon-delete"
                     @click="batchDelete">删除
          </el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
                :header-cell-style="{background:'#F2F2F2',color:'#666'}">
        <el-table-column align="left" min-width="140" label="登录用户名称" prop="userName"/>
        <el-table-column align="left" min-width="120" label="操作时间" prop="timeOperate"/>
        <el-table-column align="left" min-width="120" label="操作动作" prop="operate"/>
        <el-table-column align="left" min-width="100" label="操作对象类型" prop="objectType"/>
        <el-table-column align="left" min-width="100" label="操作对象名称" prop="objectName"/>
        <el-table-column align="left" min-width="100" label="操作描述信息" prop="descript"/>
        <!--<el-table-column align="center" label="操作" width="120" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-popover
              placement="top"
              width="200"
              trigger="manual"
              :ref="'popover-' + scope.row.endTime">
              <p>确定删除该数据吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="$refs[`popover-` + scope.row.endTime].doClose()">取消</el-button>
                <el-button type="primary" size="mini" @click="doDelete(scope.row)">确定</el-button>
              </div>
              <el-button type="danger" size="mini" slot="reference" @click="$refs[`popover-` + scope.row.endTime].doShow()">删除</el-button>
            </el-popover>
          </template>
        </el-table-column>-->
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                  @pagination="queryList" style="margin: 0"/>

    </div>
  </div>
</template>

<script>
import {doGet, doPost} from '@/api'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'usersearch',
  components: { Pagination },
  filters: {
    bankCodeFilter(val) {
      return { '0000': '富民银行', '0001': '网商银行', '0002': '振兴银行' }[val]
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        startTime: undefined,
        endTime: undefined,
        userName: undefined,
        operate: undefined,
        objectType: undefined,
        objectName: undefined
      },
      editForm: {
        endTime: undefined
      },
      batchDeleteArr: [],
      listQueryRules: {
        /*startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }]*/
        endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }]
      },
      listLoading: false,
    }
  },
  created() {
    this.queryList()
  },
  methods: {
    queryList() {
      doGet('syslog.html?op=list', this.listQuery).then(response => {
        this.list = response.rows
        this.total = response.data.totalcount
        this.listLoading = false
      }).catch((response) => {
        this.list = []
        this.total = 0
        this.listLoading = false
        this.$notify.error({
          title: '失败',
          message: response.message
        })
      })
      /*this.$refs['listQuery'].validate((valid) => {
        if (valid) {
          doGet('syslog.html?op=list', this.listQuery) .then(response => {
            this.listLoading = true
            /!*this.cancel()*!/
            this.list = response.rows
            this.listLoading = false
          }).catch(response => {
            this.list = []
            this.listLoading = false
            this.$notify.error({
              title: '失败',
              message: response.message
            })
          })
        }
      })*/
    },
    handleSelectionChange(val) {
      this.batchDeleteArr = val
      console.log(this.batchDeleteArr)
    },
    //  批量删除
    batchDelete() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          this.$confirm('此操作将永久删除该文件及其子文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            doGet('syslog.html?op=del', this.editForm ).then(response => {
              this.$notify.success({
                title: '成功',
                message: '删除成功'
              })
              this.queryList()
            }).catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.message
              })
            })
          })
        }
      })

    },
    doDelete(row) {
      doGet('syslog.html?op=del', { endTime: row.endTime })
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '删除成功'
          })
          const index = this.list.indexOf(row)
          this.list.splice(index, 1)
          this.$refs[`popover-` + row.endTime].doClose()
          this.total--
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.message
          })
        })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
